<template>
  <app-page>
    <div class="ip_main">
      <div class="ip_header">
        <div class="ip_title">IP池管理</div>
        <div>
          <el-button type="primary" class="addip_button" @click="clickaddip()">新增IP池</el-button>
        </div>
      </div>
      <div class="ip_content">
        <div style="height: calc(100% - 48px);border-bottom: 1px solid #eee;">
          <el-table stripe :data="iplist" v-loading="loading" height="100%">
            <el-table-column label="ID" prop="id" show-overflow-tooltip />
            <el-table-column label="IP地址" prop="ip" show-overflow-tooltip />
            <el-table-column label="过期时间" show-overflow-tooltip
              ><template #default="scope">
                <div>{{ scope.row.expire_time }}</div>
              </template></el-table-column
            >
            <el-table-column label="状态" show-overflow-tooltip>
              <template #default="scope">
                <div>{{ typeMap[scope.row.status] }}</div>
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" show-overflow-tooltip />
            <el-table-column label="创建时间" show-overflow-tooltip
              ><template #default="scope">
                <div>{{ scope.row.created_at }}</div>
              </template></el-table-column
            >
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <div style="display: flex">
                  <div class="csspointer" @click="handleEdit(scope.row)">编辑</div>
                  <div
                    class="csspointer"
                    style="margin-left: 12px"
                    @click.native.prevent="deleteRow(scope.row)"
                  >
                    删除
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="ip-pagination">
          <!-- hide-on-single-page -->
          <el-pagination
            :page-size="page.page_size"
            :pager-count="6"
            v-model:current-page="page.page"
            layout="prev, pager, next"
            :total="page.total"
            style="height: 32px"
          />
        </div>
      </div>
    </div>

    <AddIp v-model="showaddip" :parentdata="parentdata" @change="getiplist()" />
  </app-page>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage, ElMessageBox } from 'element-plus'
import AddIp from './AddIp.vue'

const iplist = ref([])
const page = ref({
  page: 1,
  page_size: 20,
  total: 0,
})
const showaddip = ref(false)
const parentdata = ref({
  value: 'create',
  label: '新增IP池',
  data: {},
})

const typeMap = ref({
  0: '未使用',
  1: '使用中',
  2: '已过期',
})
const loading = ref(false)

const getiplist = () => {
  let params = {
    params: {
      page: page.value.page,
      page_size: page.value.page_size,
    },
  }
  loading.value = true
  http.get('/read_list/proxyip_list', params).then(res => {
    page.value.total = res.data.total
    iplist.value = res.data.list
    loading.value = false
  })
}

const clickaddip = () => {
  showaddip.value = true
  parentdata.value = {
    value: 'create',
    label: '新增IP池',
    data: {},
  }
}
const handleEdit = row => {
  parentdata.value.value = 'update'
  parentdata.value.label = '编辑IP池'
  showaddip.value = true
  parentdata.value.data = row
}

const deleteRow = row => {
  ElMessageBox.confirm('是否删除?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      http.delete(`/read_list/proxyip_delete?id=${row.id}`).then(res => {
        ElMessage.success('删除成功')
        getiplist()
      })
    })
    .catch(() => {})
}
onMounted(() => {
  getiplist()
})
</script>

<style lang="scss" scoped>
.ip_main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.ip_header {
  height: 32px;
  background: #fff;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
}
.ip_title {
  font-size: 20px;
  font-weight: 600;
  color: #252a30;
}
.addip_button {
  border-radius: 0;
}
.addip_button:hover {
  background-color: var(--pcmain-color);
  border-color: var(--pcmain-color);
}

.ip_content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ip-pagination {
  height: 32px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}
.csspointer {
  cursor: pointer;
  color: var(--pcmain-color) !important;
}
</style>

<style>
.ip-pagination .el-pager .is-active {
  color: var(--pcmain-color) !important;
  border: 1px solid var(--pcmain-color);
}
.ip-pagination .el-pager,
.ip-pagination .el-pager .number,
.ip-pagination .el-pager .more,
.ip-pagination .btn-prev,
.ip-pagination .btn-next {
  height: 28px;
}
.ip-pagination .el-pager .number,
.ip-pagination .el-pager .more {
  font-size: 12px;
  font-weight: bold;
  color: #000;
}
.ip-pagination .el-pager li {
  width: 28px;
  min-width: 28px;
  margin: 0 3px;
}
</style>